<div class="spots view">
	
	<h2>
		<?php echo __('Spot'); ?>
	</h2>
	
	<?php
		// edit
		echo $this->Html->link(
			__('Edit'),
			array('action' => 'edit', $spot['Spot']['id']),
			array('escape' => false, 'class' => 'button edit')
		);
		// delete
		echo $this->Html->link(
			__('Delete'),
			array('action' => 'delete', $spot['Spot']['id']),
			array('escape' => false, 'class' => 'button delete'),
			__("Are you sure you want to delete this Spot?")
		);
	?>
	
	<dl>
		<dt><?php echo __('Id'); ?></dt>
		<dd>
			<?php echo h($spot['Spot']['id']); ?>
			&nbsp;
		</dd>
		<dt><?php echo __('Name'); ?></dt>
		<dd>
			<?php echo h($spot['Spot']['name']); ?>
			&nbsp;
		</dd>
		<dt><?php echo __('Description'); ?></dt>
		<dd>
			<?php echo h($spot['Spot']['description']); ?>
			&nbsp;
		</dd>
		<?php if($spot['Spot']['picture']): ?>
		<dt><?php echo __('Picture'); ?></dt>
		<dd>
			<?php echo $this->Html->image($spot['Spot']['picture_url'], array('width' => 80)); ?>
			&nbsp;
		</dd>
		<?php endif; ?>
		<dt><?php echo __('Category'); ?></dt>
		<dd><?php echo $spot['Category']['name']; ?></dd>
		
		<!-- LOCATION -->
		<dt><?php echo __('City'); ?></dt>
		<dd><?php echo $spot['City']['name']; ?></dd>
		<dt><?php echo __('Address'); ?></dt>
		<dd><?php echo $spot['Spot']['address']; ?></dd>
		<dt><?php echo __('Map'); ?></dt>
		<dd>
			<div id="map" class="map"></div>
		</dd>
	</dl>

</div>


<?php 
	echo $this->Html->script('Admin.locations', array('inline' => false));
	echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false', array('inline' => false));
?>
<script type="text/javascript">
	
	// Spot position
	<?php if( $spot['Spot']['latitude'] && $spot['Spot']['longitude'] ) : ?>
	var myPosition = {
		latitude : <?php echo $spot['Spot']['latitude']; ?>,
		longitude : <?php echo $spot['Spot']['longitude']; ?>
	};
	<?php else : ?>
	var myPosition = defaultLocation;
	<?php endif; ?>
	
	$(document).ready(function() {
		// initialize map
		initMap();
	});
	
	var initMap = function() {
		var map = initGoogleMapWithMarker('view', {
			target : 'map',
			zoom : 16,
			draggable : false,
			position : myPosition
		});
	};
	
</script>